/*
 * @Author: SailorCai
 * @Date: 2020-12-05 22:58:36
 * @LastEditors: SailorCai
 * @LastEditTime: 2020-12-06 21:58:33
 * @FilePath: /chat/client/config-overrides.js
 */
// const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
// const path = require('path');

// module.exports = override(
//   fixBabelImports('import', {
//     libraryName: 'antd-mobile',
//     libraryDirectory: 'es',
//     style: 'css',
//   }),
//   addWebpackAlias({
//     "@": path.resolve(__dirname, 'src'),
//   }),
// );  

// const { injectBabelPlugin, getLoader } = require('react-app-rewired');
const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
const autoprefixer = require('autoprefixer');
const path = require('path');

module.exports = function override1(config, env) {
  // babel-plugin-import
  config = override(
    fixBabelImports('import', {
      libraryName: 'antd-mobile',
      style: 'css',
    }),
    addWebpackAlias({
      "@": path.resolve(__dirname, 'src'),
    }),
  )(config, env);

  // config = injectBabelPlugin(['import', {
  //   libraryName: 'antd-mobile',
  //   //style: 'css',
  //   style: true, // use less for customized theme
  // }], config);

  config.module.rules[1].oneOf.unshift(
    {
      test: /\.less/,
      use: [
        require.resolve('style-loader'),
        require.resolve('css-loader'),
        {
          loader: require.resolve('postcss-loader'),
          options: {
            // Necessary for external CSS imports to work
            postcssOptions: {
              indent: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browserslist: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009'
                })
              ],
            }
          }
        },
        {
          loader: require.resolve('less-loader'),
          options: {
            lessOptions: {
              modifyVars: {
                "@brand-primary": "#01af63"
              }
            }
          },
        }
      ]
    }
  );
  config.module.rules[1].oneOf.unshift({
    test: /\.css$/,
    exclude: /node_modules|antd-mobile\.css/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          modules: true,
          importLoaders: 1,
          modules: {
            localIdentName: '[local]___[hash:base64:5]'
          }
        }
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          postcssOptions: {
            indent: 'postcss',
            plugins: () => [
              require('postcss-flexbugs-fixes'),
              autoprefixer({
                browserslist: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009'
              })
            ],
          }
        }
      }
    ],
  });
  console.log(config);
  return config;
}
